<template>
    <div class="sticky top-0 bg-white z-50">
        <el-scrollbar>
            <div class="flex space-x-6 py-3">
                <div class="flex space-x-2" v-for="(d1, d1i) in department1" :key="d1i">

                    <el-checkbox-group v-model="checkedD1">
                        <el-checkbox v-model="checkedD1[d1i]" :indeterminate="isIndeterminate[d1i]" :value="d1" :label="d1" :name="d1"
                            @change="changeChecked(d1, $event)">
                            <span class="font-bold"> {{ d1 }}</span></el-checkbox>
                    </el-checkbox-group>

                    <el-checkbox-group class="flex space-x-2" v-model="checkedD2">
                        <el-checkbox v-for="(d2, d2i) in department2[d1i]" :key="d2i" :value="d2" :label="d2" :name="d2"
                            @change="changeChecked(d2, $event)">{{
                                d2 }}</el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import department from '@/common/getDepartment';
const { department1, department2 } = department;
defineProps([]);
const emit = defineEmits(['doSelected']);

const checkedD1 = ref([]),
    checkedD2 = ref([]),
    SelectedDepartment = ref([[], []]),
    isIndeterminate = ref(Array(department1.length).fill(false));


const changeChecked = (label, checked) => {
    if (department1.includes(label)) {
        if (label === '全市') {
            checkedD1.value = checked ? department1 : [];
            checkedD2.value = checked ? department2.flat() : [];
            isIndeterminate.value = Array(department1.length).fill(false);
        } else {
            const curD2 = department2[department1.indexOf(label)]
            checkedD2.value = checked ? Array.from(new Set([...checkedD2.value, ...curD2])) : checkedD2.value.filter(item => !curD2.includes(item));

            const index = department1.indexOf(label);
            isIndeterminate.value[index] = !(department2[index].every(val => checkedD2.value.includes(val)) || !department2[index].some(val => checkedD2.value.includes(val)));
        }
    } else {
        for (let i = 0; i < department2.length; i++) {
            if (department2[i].includes(label)) {
                const isSelectAll = department2[i].every(value => checkedD2.value.includes(value));
                checkedD1.value = isSelectAll ? Array.from(new Set([...checkedD1.value, department1[i]])) : checkedD1.value.filter(item => item !== department1[i]);
                isIndeterminate.value[i] = !(department2[i].every(val => checkedD2.value.includes(val)) || !department2[i].some(val => checkedD2.value.includes(val)));
                break;
            }
        }
    }

    if (label !== '全市') {
        const isSelectAll = checkedD2.value.length >= department2.flat().length;
        checkedD1.value = isSelectAll ? Array.from(new Set([...checkedD1.value, '全市'])) : checkedD1.value.filter(item => item !== '全市');
    }

    doSelected();
}

const doSelected = () => {
    console.table('selectedDepartment', [...checkedD1.value, ...checkedD2.value])
    emit('doSelected', [checkedD1.value, checkedD2.value])
}

</script>

<style scoped>
.el-checkbox {
    margin-right: 0px;
}
</style>